.hzdz-congestion-level {
  position: relative;
  padding: 20px;
  user-select: none;

  .hzdz-congestion-level__title {
    position: absolute;
    // left: 24px;
    // top: 20px;
    width: 128px;
    height: 22px;
    text-align: left;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    line-height: 22px;
  }

  .hzdz-congestion-level__content {
    position: absolute;
    left: 34px;
    top: 45px;
    display: flex;
    align-items: center;
    gap: 7px;

    .hzdz-congestion-level__level-box {
      position: relative;
      width: 88px;
      height: 40px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid #008BFF;

      // 渐变背景效果
      background: linear-gradient(135deg, #008BFF 0%, #0F6DBB 100%);
      
      // 内边框效果
      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        border-radius: 3px;
        border: 1px solid rgba(0, 139, 255, 0.5);
        pointer-events: none;
      }

      .hzdz-congestion-level__level {
        position: relative;
        z-index: 2;
        text-align: center;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        color: #FFFFFF;
        font-size: 24px;
        font-family: DINAlternate;
        font-weight: bold;
        line-height: 28px;
        letter-spacing: 0.86px;
      }
    }

    .hzdz-congestion-level__icon {
      width: 24px;
      height: 24px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  // 响应式适配 - 基准分辨率为3952x1248
  // 默认情况下应用响应式适配
  // @media screen and (max-width: 1920px) {
  //   transform: scale(0.4862);
  //   transform-origin: top left;
  // }
  // @media screen and (max-width: 1080px) {
  //   transform: scale(0.2733);
  //   transform-origin: top left;
  // }
  // @media screen and (min-width: 5120px) {
  //   transform: scale(1.2955);
  //   transform-origin: top left;
  // }
  
  // 当父容器有缩放时，禁用响应式适配
  &.no-responsive-scale {
    @media screen and (max-width: 1920px) {
      transform: none;
    }
    @media screen and (max-width: 1080px) {
      transform: none;
    }
    @media screen and (min-width: 5120px) {
      transform: none;
    }
  }
} 